<template>
  <div id="app">
    <div style="display: flex">
      <span @click="clickHandle">click Test</span
      ><router-link :to="{ path: '/home' }">to HOME</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {
    this.$uic.fontSize(16);
    this.$toast("test").destroy();
    const { state, toggle } = this.$uic.toggle();
    toggle(true);
    console.log(state.value);
    toggle(false);
    console.log(state.value);
    const { width, height, top, left, right, bottom } = this.$uic.rect();
    console.log(width, height, top, left, right, bottom);
  },
  mounted() {
    const { width, height, top, left, right, bottom } = this.$uic.rect("#app");
    console.log(width, height, top, left, right, bottom);
    this.$uic.eventListener("resize", (e) => {
      console.log(e);
    });
    this.$uic.pageVisibility((v) => console.log(v));
  },
  methods: {
    changeHandle(v) {
      let type = this.uiToggleButton.buttons[v].title.toLowerCase();
      this.uiList.type = type;
      this.uiList.header.title = "type: " + type;
    },
    submitHandle(v) {
      console.log(v);
      this.$toast(v).destroy();
    },
    clickHandle() {
      let that = this;
      this.$addModel(
        Promise.resolve({
          data: {
            router: [
              {
                path: "/testA",
                name: "testA",
                component: {
                  path: "http://172.29.153.79:8080/test/test.js",
                  name: "testA",
                },
                meta: {
                  title: "testA",
                },
              },
            ],
          },
        })
      )
        .then(() => {
          that.$router.push("/testA");
        })
        .catch((v) => {
          console.log(v);
        });
      //this.$router.push("/testA");
    },
    enterHandle(e, v) {
      console.log(e, v);
    },
  },
};
</script>
<style lang="less">
body {
  padding: 0;
  margin: 0;
  background-color: #efefef;
  .ui_card {
    .handle {
      font-size: 12px;
    }
    .content_image {
      display: block;
      width: 50%;
      height: 100%;
      float: left;
    }
  }
  .loading_back {
    padding: 10px;
  }
}
</style>
